<template>
  <div class="cate_content">
    <van-badge-group
      :active-key="activeKey"
      @change="onChange"
    >
      <van-badge
        v-for="(v,i) in topList"
        :key="i"
        :title="v.categoryName"
      />

    </van-badge-group>

    <ul>
      <li
        v-show="secList.length"
        v-for="(v,i) in secList"
        :key="i"
      >
        <img
          :src="`http://127.0.0.1:3000${v.brandLogo}`"
          alt=""
        >
        <p>{{ v.brandName }}</p>
      </li>
      <li v-show="!secList.length">暂无数据</li>
    </ul>
  </div>
</template>

<script>
import { mobile } from '@/api'
export default {
  data () {
    return {
      activeKey: 0,
      topList: [],
      secList: []
    }
  },
  created () {
    this.getTopList(this.getSecList)
  },
  methods: {
    onChange (key) {
      this.activeKey = key
      console.log(this.topList[key].id)
      this.getSecList(this.topList[key].id)
    },
    getTopList (callback) {
      mobile.queryTopCategory().then(res => {
        console.log(res)
        this.topList = res.data.rows
        callback && callback(this.topList[0].id)
      })
    },
    getSecList (id) {
      mobile.querySecCategory({
        id: id
      }).then(res => {
        console.log(res)
        this.secList = res.data.rows
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.cate_content {
  display: flex;
  ul {
    flex: 1;
    li {
      float: left;
      width: 33.33%;
      text-align: center;
      img {
        width: 100%;
      }
    }
  }
}
</style>
